<style >
.train-info {
    padding:60px 0 120px 0;
    background-color:#fff;
}

.train-info .el-form-item .el-form-item__label {
    color:#7485B1;
}

.train-info .el-form-item {
    margin-bottom: 10px;
    color:#3A3A63;
}

.train-info .el-form-item .train-name {
    line-height:30px;
    max-width:800px;
    padding-top:6px;
    display: inline-block;
}

.train-info .el-form-item a {
    color:#3577FB;
}
</style>

<template>
<div class="train-info">
    <el-form ref="form" label-width="150px">
        <el-form-item label="培训名称">
            <span>{{ form.trainName }}</span>
        </el-form-item>
        <el-form-item label="培训人">
            <span>{{ form.lecturer }}</span>
        </el-form-item>
        <el-form-item label="培训时间">
            <span>{{ form.trainDate }} {{ form.trainTime }} ~ {{ form.trainDate }} {{ form.trainExpiredTime }}</span>
        </el-form-item>
        <el-form-item label="培训地点">
            <span>{{ form.address }}</span>
        </el-form-item>
        <el-form-item label="培训人员">
            <span class="train-name">
                {{ nameList.join(',')}}
            </span>
        </el-form-item>
        <el-form-item label="备注">
            <span>{{ form.comment }}</span>
        </el-form-item>

        <el-form-item label="签到详情" v-if=" form.trainStatus == 2 || form.trainStatus == 3">

            <a href="javascript:;" class="operate" @click="getSignList">查看</a>
        </el-form-item>

        <el-form-item label="培训简介">
            <div v-html="form.intro"></div>
        </el-form-item>

    </el-form>

    <el-dialog
        title="签到明细"
        :visible.sync="centerDialogVisible"
        width="50%"
        center
        class="signbox"
        :data="detailData">
    <section class="signup-total sign-input-box">
        总计：<span class="st-num mr">{{headThreeData.TrainNum}}</span>
        签到：<span class="st-num mr">{{headThreeData.SignInNum}}</span>
        签退：<span class="st-num mr">{{headThreeData.SignOutNum}}</span>
        <el-input placeholder="请输入学员姓名" v-model="keywords" class="input-with-select fr">
            <el-button slot="append" icon="el-icon-search" @click="getSignDetail"></el-button>
        </el-input>
    </section>
    <section class="table-box mt">
        <el-table :data="gridData"  height="300">
            <el-table-column property="Username" label="姓名" style="text-align: center;"></el-table-column>
            <el-table-column label="签到">
                <template slot-scope="ione">
                    <span v-if="ione.row.SignIn == 0">-</span>
                    <span v-if="ione.row.SignIn == 1"><img class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/correct-icon.png" alt=""></span>
                </template>
            </el-table-column>
            <el-table-column label="签退">
                <template slot-scope="ione">
                    <span v-if="ione.row.SignOut == 0">-</span>
                    <span v-if="ione.row.SignOut == 1"><img class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/correct-icon.png" alt=""></span>
                </template>
            </el-table-column>
        </el-table>
    </section>
    <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="centerDialogVisible = false">知道了</el-button>
       </span>
</el-dialog>

</div>
</template>

<script>
import qs from 'qs'

export default {
    data() {
        return {
            trainID:"",
            form:{},
            keywords:"",
            nameList:[],
            centerDialogVisible:false,
            gridData:[],
            headThreeData:{},
            path:[
                {
                    name:'培训学习',
                    path:'/study/plan-list'
                },
                {
                    name:'培训管理',
                    path:'/training/training-manage'
                },
                {
                    name:'培训详情'
                }
            ],

        }
    },

    methods:{
         getTrainInfo() {
            axios.post('/com/train/get', qs.stringify({trainID:this.trainID})).then((res) => {
                var d = res.data
                if(d.flag == 1){
                    this.form = d.data
                    try{
                        (this.form.enrollTargetMembers.length > 0 ) && (this.nameList = this.form.enrollTargetMembers.map(v=> v.Username))
                    } catch(error){
                        console.log(error)
                    }

                } else {
                    this.$message.error(d.msg)
                }
            })
        },

        getSignList() {
            axios.post('/com/train/getSignList', qs.stringify({
                keywords:this.keywords,
                trainID: this.trainID
            })).then((res) => {
                var d = res.data
                if(d.flag == 1){
                    this.centerDialogVisible = true
                    this.gridData = d.data.Employees
                    this.headThreeData = d.data
                } else {
                    this.$message.error(d.msg)
                }
            })
        },

        getSignDetail() {
            this.getSignList()
        },

        // 弹窗查询触发
        getSearch(value, type) {
            this.keywords = value
            this.getSignList()
        },



    },

    mounted() {
        this.trainID = this.$route.query.id
        // 设置面包屑
        this.$store.commit('setPath', this.path)
        this.getTrainInfo()
    }
}
</script>
